// components/organisms/Footer/sxobjects.js - GitHub themed styles for Footer

// Styled component styles for MenuButton
export const getMenuButtonStyles = (darkMode) => ({
  fontFamily: '"Poppins", "Roboto", sans-serif',
  fontSize: '1.8rem',
  fontWeight: '700',
  color: darkMode ? '#f0f6fc' : 'white', // GitHub dark text vs original white
  textTransform: 'none',
  padding: '8px 16px',
  minWidth: 'auto',
  lineHeight: 1.1,
  backgroundColor: darkMode ? '#21262d' : 'transparent', // GitHub dark background
  border: darkMode ? '1px solid #30363d' : 'none', // GitHub dark border
  borderRadius: darkMode ? '6px' : '0', // GitHub rounded corners
  transition: 'all 0.2s ease-in-out',
  '&:hover': {
    backgroundColor: darkMode 
      ? '#30363d' // GitHub dark hover
      : 'rgba(255, 255, 255, 0.1)', // Original light hover
    color: darkMode ? '#58a6ff' : 'white', // GitHub blue on hover vs original white
    borderColor: darkMode ? '#58a6ff' : 'transparent', // GitHub blue border on hover
  }
});

// Styled component styles for StyledMenuItem
export const getStyledMenuItemStyles = (darkMode) => ({
  fontFamily: '"Poppins", "Roboto", sans-serif',
  fontSize: '1.2rem',
  fontWeight: '500',
  padding: '4px 16px',
  minHeight: 'auto',
  lineHeight: 1.2,
  color: darkMode ? '#f0f6fc' : 'inherit', // GitHub dark text
  backgroundColor: darkMode ? '#21262d' : 'transparent', // GitHub dark background
  '&:hover': {
    backgroundColor: darkMode 
      ? '#30363d' // GitHub dark hover
      : 'rgba(0, 0, 0, 0.04)', // Standard hover color
    color: darkMode ? '#58a6ff' : 'inherit', // GitHub blue text on hover
  },
  '&.Mui-disabled': {
    color: darkMode ? '#8b949e' : 'rgba(0, 0, 0, 0.26)', // GitHub muted text vs default disabled
  }
});

// Styled component styles for MenuContainer
export const getMenuContainerStyles = (darkMode) => ({
  display: 'flex',
  gap: (theme) => theme.spacing(1), // Use theme.spacing properly
  padding: darkMode ? (theme) => theme.spacing(2) : 0, // Add padding in dark mode
  backgroundColor: darkMode ? '#0d1117' : 'transparent', // GitHub darker background
  borderRadius: darkMode ? '8px' : '0', // Rounded container in dark mode
  border: darkMode ? '1px solid #21262d' : 'none', // Subtle border in dark mode
  // Proper breakpoint syntax for styled components
  flexDirection: 'column', // Default to column
  alignItems: 'center', // Default alignment
  '@media (min-width: 600px)': { // sm breakpoint and up
    flexDirection: 'row',
    justifyContent: 'center',
    flexWrap: 'wrap',
  }
});

// Menu sx styles
export const getMenuSx = (darkMode) => ({
  '& .MuiPaper-root': {
    backgroundColor: darkMode ? '#21262d' : 'white', // GitHub dark menu background
    borderColor: darkMode ? '#30363d' : 'rgba(0, 0, 0, 0.12)', // GitHub dark border
    border: darkMode ? '1px solid' : 'none', // Add border in dark mode
    borderRadius: '6px', // GitHub rounded corners
    boxShadow: darkMode 
      ? '0 8px 24px rgba(1, 4, 9, 0.8)' // GitHub dark shadow
      : '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)', // Default MUI shadow
  },
  '& .MuiList-root': {
    padding: 0,
    backgroundColor: darkMode ? '#21262d' : 'transparent',
  }
});

// AdaptiveLayout sx styles
export const getAdaptiveLayoutProps = (darkMode) => ({
  backgroundColor: darkMode ? '#0d1117' : '#40d47e', // GitHub dark background vs original green
  marginY: 0,
  paddingY: 4,
  paddingX: 2,
  centered: true,
  fullWidth: true,
  useInnerWrapper: true,
  // Additional sx for dark mode
  sx: darkMode ? {
    borderTop: '1px solid #21262d', // Subtle top border
    '& *': {
      color: '#f0f6fc !important', // Ensure all text is GitHub white
    }
  } : {}
});

// VisitorCounter container sx
export const getVisitorCounterSx = (darkMode) => ({
  display: 'flex',
  justifyContent: 'center',
  mt: 3,
  padding: darkMode ? (theme) => theme.spacing(2) : 0, // Add padding in dark mode
  backgroundColor: darkMode ? '#21262d' : 'transparent', // GitHub dark background
  borderRadius: darkMode ? '8px' : '0', // Rounded in dark mode
  border: darkMode ? '1px solid #30363d' : 'none', // Border in dark mode
});